<template>
  <!-- 列表 -->
  <section class="list">
    <!-- 头部筛选区域 -->
    <section class="top">
      <el-input
        v-model="tableParams.keyword"
        clearables
        placeholder="搜索标题"
      />
      <el-button icon="search" type="primary" @click="queryListFun"
        >查询</el-button
      >
      <el-button icon="DocumentAdd" type="success" @click="addOrEditFun('add')"
        >新增课程类型</el-button
      >
    </section>
    <!-- 表格区域 -->
    <el-table :data="tableData" stripe class="content" v-loading="tableLoading">
      <el-table-column
        v-for="item in tableColumn"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
            link
            type="warning"
            size="small"
            @click="addOrEditFun('edit', scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="deleteFun(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <section class="bottom">
      <el-pagination
        background
        v-model:current-page="tableParams.pageNum"
        v-model:page-size="tableParams.pageSize"
        :total="tableDataTotal"
        @size-change="changePageSize"
        @current-change="changePageNum"
      />
    </section>
  </section>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { userStore } from "@/stores/userInfo";
import { ElMessageBox } from "element-plus"; // 统一提醒
import { tableColumn, queryListRequest, deleteRequest } from "@/apis/courseType.js";

const router = useRouter();
const userInfo = userStore();
/**表格相关**/
// 表格数据
let tableData = ref([]);
// 表格请求参数
let tableParams = ref({
  keyword: "", //关键字
  pageNum: 1, // 页面
  pageSize: 10, // 条数
});
// 表格请求loading
let tableLoading = ref(false);
//表格总页数
let tableDataTotal = ref(0);
// 获取列表数据函数
const queryListFun = async () => {
  tableLoading.value = true;
  const res = await queryListRequest(tableParams.value);
  tableData.value = res.data;
  tableDataTotal.value = res.count;
  tableLoading.value = false;
};
// 初始化请求
queryListFun();
// 更改页码
const changePageSize = (pageSize) => {
  tableParams.value.pageSize = pageSize;
  queryListFun();
};
// 更改页码
const changePageNum = (pageNum) => {
  tableParams.value.pageNum = pageNum;
  queryListFun();
};

/**新增政策弹框**/
const addOrEditFun = (type, rowData = {}) => {
  delete rowData.menuText;
  delete rowData.updateTime;
  router.push({
    path: "/courseType/addOrEdit",
    query: {
      type: type,
      rowData: JSON.stringify(rowData),
    },
  });
};

/**删除政策**/
const deleteFun = async (params) => {
  ElMessageBox.confirm("确定删除该课程吗？", "Warning", {
    title: "",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "删除中...";
        await deleteRequest({ id: params });
        queryListFun();
        done();
        setTimeout(() => {
          instance.confirmButtonLoading = false;
        }, 300);
      } else {
        done();
      }
    },
  });
};
</script>
<style lang="less" scoped>
.list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .top {
    display: flex;
    .el-input {
      width: 300px;
      margin-right: 20px;
    }
  }
  .content {
    width: 100%;
    flex: 1;
    overflow-y: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .bottom {
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>
